<template>
  <div class="signal">
    <div class="box1">
      <div class="left" style="display: flex;">
        <img src="" alt="">
        <p style="width: 80px;border-right: 1px solid black;height: 20px;">在线行情</p>
      </div>
      <div class="right">
        <el-row>
          <el-button type="danger">在线行情</el-button>
          <el-button type="success">成功按钮</el-button>
        </el-row>
      </div>
    </div>
    <div class="box2">
      <div class="left">
        <el-carousel height="400px" style="margin-top: 20px;">
          <el-carousel-item v-for="item in 4" :key="item">
            <h3 class="small">{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="right">
        <h2>分行者跟单社区</h2>
        <div class="smallbox1">
          <div class="tubiao">
            <img src="../../assets/img/tubiao1.png" alt="">
          </div>
          <div class="smallright">
            <p class="p1">绑定账户</p>
            <p class="p2">绑定已有帐户</p>
          </div>
        </div>
        <div class="smallbox1">
          <div class="tubiao">
            <img src="../../assets/img/tubiao1.png" alt="">
          </div>
          <div class="smallright">
            <p class="p1">绑定账户</p>
            <p class="p2">绑定已有帐户</p>
          </div>
        </div>
        <div class="smallbox1">
          <div class="tubiao">
            <img src="../../assets/img/tubiao2.png" alt="">
          </div>
          <div class="smallright">
            <p class="p1">绑定账户</p>
            <p class="p2">绑定已有帐户</p>
          </div>
        </div>
        <div class="smallbox1">
          <div class="tubiao">
            <img src="../../assets/img/tubiao2.png" alt="">
          </div>
          <div class="smallright">
            <p class="p1">绑定账户</p>
            <p class="p2">绑定已有帐户</p>
          </div>
        </div>
      </div>
    </div>
    <div class="box3">
      <div class="tounav">
        <p class="p1" style="float: left;">筛选</p>
        <p class="p2" style="float: right;">重置</p>
      </div>
      <div class="period" style="display: flex;margin-top: 30px;">
        <span style="margin-top: 10px;margin-right: 30px;">交易周期</span>
        <button class="myButton" v-for="(button, index) in buttons" :key="index" @click="toggleButton(index)"
          :class="{ clicked: button.clicked }">
          {{ button.label }}
        </button>
      </div>
      <div class="earning" style="display: flex;margin-top: 35px;">
        <span>收益率（%）:</span>
        <div class="block" style="width: 300px;margin-top: -10px;margin-right: 10px;">
          <el-slider v-model="value" range :marks="marks">
          </el-slider>
        </div>
        <span>超过300%</span>
        <span style="margin-left: 30px;">最大回撤（%）:</span>
        <div class="block2" style="width: 300px;margin-top: -10px;margin-right: 10px;">
          <el-slider v-model="value" range :marks="marks">
          </el-slider>
        </div>
        <span>超过30%</span>
      </div>
    </div>
    <div class="box4">
      <p style="margin-right: 30px;">排序:</p>
      <span style="width: 100px;">收益率</span>
      <span style="width: 100px;">总收益</span>
      <span style="width: 100px;">订阅人数</span>
      <span style="width: 100px;">最大回撤</span>
      <span style="width: 100px;">交易时长</span>
    </div>
    <div class="box5">
      <div class="messagebox">
        <img :src="imageURLA" alt="" style="padding: 10px;box-sizing: border-box;background-color: aliceblue;" />
        <p class="p1" style="font-size: 25px; font-weight: bolder; margin-top: 20px">
          康桥-欧美文件性策略
        </p>
        <hr style="margin-top: 20px" />
        <p class="p2" style="color: green; font-size: 23px">106.76%</p>
        <p class="p3">收益率</p>
          <div class="chart2" ref="chart2"></div>
        <div class="message" style=" padding:0 20px; box-sizing: border-box">
          <div class="m1" style="display: flex; justify-content: space-between;margin-bottom: 20px;">
            <span>获利</span>
            <span>4270.48</span>
          </div>
          <div class="m2" style="display: flex; justify-content: space-between;margin-bottom: 20px;">
            <span>胜率</span>
            <span>77.87%</span>
          </div>
          <div class="m3" style="display: flex; justify-content: space-between;margin-bottom: 10px;">
            <span>最大回撤</span>
            <span>1.93%</span>
          </div>
        </div>
        <div class="level" style="display: flex; justify-content: space-around;overflow: hidden;margin-top: 31px;">
          <p style="margin-top: 5px;width: 300px;">level3</p>
          <button
            style="height: 0;width:0;border-right: 130px solid #0487f9;border-bottom: 40px solid #0487f9;border-left: 60px solid transparent;color: white;background-color: transparent;">
            <p style="position: absolute;margin-top: 10px;font-weight: bold;">立即订阅</p>
          </button>
        </div>
      </div>
      <div class="messagebox">
        <img :src="imageURLB" alt="" style="padding: 10px;box-sizing: border-box;background-color: aliceblue;" />
        <p class="p1" style="font-size: 25px; font-weight: bolder; margin-top: 20px">
          康桥-欧美文件性策略
        </p>
        <hr style="margin-top: 20px" />
        <p class="p2" style="color: green; font-size: 23px">106.76%</p>
        <p class="p3">收益率</p>
          <div class="chart2" ref="chart2"></div>
        <div class="message" style=" padding:0 20px; box-sizing: border-box">
          <div class="m1" style="display: flex; justify-content: space-between;margin-bottom: 20px;">
            <span>获利</span>
            <span>4270.48</span>
          </div>
          <div class="m2" style="display: flex; justify-content: space-between;margin-bottom: 20px;">
            <span>胜率</span>
            <span>77.87%</span>
          </div>
          <div class="m3" style="display: flex; justify-content: space-between;margin-bottom: 10px;">
            <span>最大回撤</span>
            <span>1.93%</span>
          </div>
        </div>
        <div class="level" style="display: flex; justify-content: space-around;overflow: hidden;margin-top: 31px;">
          <p style="margin-top: 5px;width: 300px;">level3</p>
          <button
            style="height: 0;width:0;border-right: 130px solid #0487f9;border-bottom: 40px solid #0487f9;border-left: 60px solid transparent;color: white;background-color: transparent;">
            <p style="position: absolute;margin-top: 10px;font-weight: bold;">立即订阅</p>
          </button>
        </div>
      </div>
      <div class="messagebox">
        <img :src="imageURLA" alt="" style="padding: 10px;box-sizing: border-box;background-color: aliceblue;" />
        <p class="p1" style="font-size: 25px; font-weight: bolder; margin-top: 20px">
          康桥-欧美文件性策略
        </p>
        <hr style="margin-top: 20px" />
        <p class="p2" style="color: green; font-size: 23px">106.76%</p>
        <p class="p3">收益率</p>
          <div class="chart2" ref="chart2"></div>
        <div class="message" style=" padding:0 20px; box-sizing: border-box">
          <div class="m1" style="display: flex; justify-content: space-between;margin-bottom: 20px;">
            <span>获利</span>
            <span>4270.48</span>
          </div>
          <div class="m2" style="display: flex; justify-content: space-between;margin-bottom: 20px;">
            <span>胜率</span>
            <span>77.87%</span>
          </div>
          <div class="m3" style="display: flex; justify-content: space-between;margin-bottom: 10px;">
            <span>最大回撤</span>
            <span>1.93%</span>
          </div>
        </div>
        <div class="level" style="display: flex; justify-content: space-around;overflow: hidden;margin-top: 31px;">
          <p style="margin-top: 5px;width: 300px;">level3</p>
          <button
            style="height: 0;width:0;border-right: 130px solid #0487f9;border-bottom: 40px solid #0487f9;border-left: 60px solid transparent;color: white;background-color: transparent;">
            <p style="position: absolute;margin-top: 10px;font-weight: bold;">立即订阅</p>
          </button>
        </div>
      </div>
      <div class="messagebox">
        <img :src="imageURLA" alt="" style="padding: 10px;box-sizing: border-box;background-color: aliceblue;" />
        <p class="p1" style="font-size: 25px; font-weight: bolder; margin-top: 20px">
          康桥-欧美文件性策略
        </p>
        <hr style="margin-top: 20px" />
        <p class="p2" style="color: green; font-size: 23px">106.76%</p>
        <p class="p3">收益率</p>
          <div class="chart2" ref="chart2"></div>
        <div class="message" style=" padding:0 20px; box-sizing: border-box">
          <div class="m1" style="display: flex; justify-content: space-between;margin-bottom: 20px;">
            <span>获利</span>
            <span>4270.48</span>
          </div>
          <div class="m2" style="display: flex; justify-content: space-between;margin-bottom: 20px;">
            <span>胜率</span>
            <span>77.87%</span>
          </div>
          <div class="m3" style="display: flex; justify-content: space-between;margin-bottom: 10px;">
            <span>最大回撤</span>
            <span>1.93%</span>
          </div>
        </div>
        <div class="level" style="display: flex; justify-content: space-around;overflow: hidden;margin-top: 31px;">
          <p style="margin-top: 5px;width: 300px;">level3</p>
          <button
            style="height: 0;width:0;border-right: 130px solid #0487f9;border-bottom: 40px solid #0487f9;border-left: 60px solid transparent;color: white;background-color: transparent;">
            <p style="position: absolute;margin-top: 10px;font-weight: bold;">立即订阅</p>
          </button>
        </div>
      </div>
    </div>
    <div class="chart2" ref="chart2"></div>
    <div class="box6">
      <el-pagination background layout="prev, pager, next" :total="1" :small-size="20">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'

export default {
  name: 'SignalView',
  data () {
    return {
      imageURLA: 'https://fxhot.oss-cn-zhangjiakou.aliyuncs.com/jeecgossbizPath/mmexport1667117043034_1677744831036.png',
      imageURLB: 'https://fxhot.oss-cn-zhangjiakou.aliyuncs.com/jeecgossbizPath/1668068918777.png_1677723758227.jpg',
      buttons: [
        { label: '不限', clicked: false },
        { label: '小于12周', clicked: false },
        { label: '12-24周', clicked: false },
        { label: '24-52周', clicked: false },
        { label: '52周以上', clicked: false }
      ],
      chart2: null,
      value: [0, 300],
      marks: {
        0: '0%',
        300: {
          style: {
            color: '#1989FA'
          },
          label: this.$createElement('strong', '300%')
        }
      }
    }
  },

  methods: {
    initLineChart () {
      const chart2 = echarts.init(this.$refs.chart2)
      const option2 = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: []
        },
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月'],
          show: false
        },
        yAxis: {
          type: 'value',
          show: false
        },
        series: [
          {
            name: '数据项1',
            type: 'line',
            data: [150, 230, 224, 218]
          }

        ],
        color: ['#ccc000'],
        backgroundColor: '#fff'

      }
      chart2.setOption(option2)
      this.chart2 = chart2
    },
    toggleButton (index) {
      this.buttons[index].clicked = !this.buttons[index].clicked
    }
  },
  mounted () {
    this.initLineChart()
  }
}

</script>

<style lang="scss" scoped>
.signal {
  padding-left: 100px;
  padding-right: 100px;
  box-sizing: border-box;
  background-color: rgba($color: skyblue, $alpha: 0.1);
}
 .chart2 {
      height: 200px;
      width: 300px;
      //background-color: pink;
    }
.box1 {
  width: 100%;
  height: 100px;
  margin-top: 55px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
}

.box2 {
  width: 100%;
  height: 500px;
  background-color: white;
  overflow: hidden;
  display: flex;

  .left {
    width: 600px;
    height: 100%;
    //background-color: pink;
    margin-left: 200px;
  }

  .right {
    width: 300px;
    height: 500px;
    //background-color: darkcyan;
    margin-left: 150px;

    h2 {
      font-weight: bolder;
    }

    .smallbox1 {
      width: 100%;
      height: 100px;
      //background-color: skyblue;
      display: flex;
      padding-top: 20px;
      box-sizing: border-box;
      border-bottom: 2px dotted gray;
      margin-bottom: 5px;

      .tubiao {
        width: 100px;
        height: 100%;
        // background-color: green;
        line-height: 1;
      }

      .smallright {
        width: 100px;
        height: 100%;
        margin-left: 50px;

        .p1 {
          font-size: 20px;
          font-weight: bold;
        }

        .p2 {
          margin-top: 10px;
        }
      }
    }
  }
}

.box3 {
  width: 100%;
  height: 250px;
  background-color: white;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 20px;

  .tounav {
    width: 100%;
    height: 30px;
    border-bottom: 1px solid gray;
  }

  .period {
    .myButton.clicked {
      background-color: skyblue;
      color: white;
      padding: 5px;
      box-sizing: border-box;
      border-radius: 5px;
    }

    button {
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 10px;
      border: none;
      background-color: white;
    }

    button:hover {
      color: skyblue;
    }
  }

  .earning {
    .block {
      .el-slider__runway {
        background-color: red;
        /* 设置线条颜色 */
      }
    }
  }
}

.box5 {
  width: 100%;
  height: 1300px;
  margin-top: 20px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  padding: 0 150px;
  overflow: hidden;
  box-sizing: border-box;
  flex-wrap: wrap;

  .messagebox {
    width: 300px;
    height: 550px;
    border: 2px solid rgba($color: gray, $alpha: 0.1);
    border-radius: 10px;
    //background-color: aquamarine;
    margin-top: 50px;
    .chart2 {
      height: 200px;
      width: 300px;
      background-color: rgba($color: gray, $alpha: 0.1);
    }

    img {
      width: 100px;
      height: 100px;
      background-color: pink;
      margin: 0 auto;
      border-radius: 50%;
      margin-top: -50px;

    }
  }
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.box4 {
  width: 100%;
  height: 80px;
  padding-left: 10px;
  padding-top: 30px;
  box-sizing: border-box;
  background-color: white;
  margin-top: 20px;
  display: flex;

  span:hover {
    color: skyblue;
  }
}

.box6 {
  width: 100%;
  height: 100px;
  background-color: white;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
